<template>
    <!-- 查看打印弹框 -->
    <div v-if="cfg.visible">
        <the-dialog :cfg="cfg" :loading="loading" width="80%" top="5%" defined-footer no-max-height @closed="onClose()">
            <template slot="body">
                <iframe v-if="printType == 1 && pdfUrl" style="width: 100%;min-height: 700px;" :src="pdfUrl" frameborder="0"></iframe>
                <img v-if="printType == 2 && imgUrl" class="print__cont" :src="imgUrl" alt="">
                <el-empty v-if="!imgUrl && !pdfUrl" class="x-empty " description="暂无数据"></el-empty>
            </template>
            <div class="print__footer" slot="foot">
                <el-button v-if="hasSave" class="o-btn" type="primary" size="small" @click="onSave">保存图片</el-button>
                <el-button v-if="isCancel" class="o-btn" type="danger" size="small" @click="onCancel">撤销</el-button>
            </div>
        </the-dialog>
    </div>
</template>
<script>
    export default {
        props: {
            hasSave: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                cfg: {
                    visible: false,
                    title: ''
                },
                loading: false,
                data: {
                    id: '',
                    resource: '', // 1=生成住院建议书 2=生成健康指导 3=生成检验检查单 4=生成处方单 5=生成申请单
                    type: '', // 生成类型 1=pdf,2=img生成类型
                    template: '', // 申请单模板
                },

                imgUrl: '', // 生成图片
                pdfUrl: '', // 生成pdf

                isCancel: false, // 显示撤销
            }
        },
        methods: {
            /**
             * 打开查看打印
             * @param id 需生成的数据id
             * @param resource 生成模板类型 (1=生成住院建议书 2=生成健康指导 3=生成检验检查单 4=生成处方单 5=生成申请单)
             * @param type [type=1] 生成文件类型 (1=pdf,2=img)
             * @param template resource=5，需传申请单模板类型
             * */
            onOpen({ id, resource, type, template, isCancel } = {}) {
                this.loading = true;
                this.cfg.visible = true;
                this.cfg.title = '查看';
                this.cfg.title += {
                    1: '住院建议',
                    2: '健康指导',
                    3: '报告建议',
                    4: '处方',
                    5: '检查检验建议',
                    6: '处方',
                } [resource] || '';


                this.id = id || '';
                this.resourceType = resource || '';
                this.printType = type || 1;
                this.printTemplate = template || '';

                this.isCancel = isCancel || false;

                this.getDetail(this.printType);
            },
            getDetail(printType) {
                let api = 'getPrescriptPdfByLj';
                let params = {
                    id: this.id,
                    type: printType
                }

                if (this.resourceType != 6) { // 非廉江his
                    api = 'getEstablishPdf';

                    params.resourceType = this.resourceType;
                    if (this.printTemplate) params.template = this.printTemplate;
                }

                return new Promise((resolve, reject) => {
                    let key = printType == 1 ? 'pdfUrl' : 'imgUrl';

                    this.$ajax[api](params).then(res => {
                        this[key] = res.data.url || '';

                        setTimeout(() => {
                            this.loading = false;
                        }, 600)

                        resolve(this[key]);
                    }).catch(err => {
                        this.loading = false;
                        this.$util.message(err.msg)
                    })
                })
            },
            onSave() {
                this.getDetail(2).then(url => {
                    this.downloadIamge(url)
                })
            },
            downloadIamge(imgsrc, name) { //下载图片地址和图片名
                let image = new Image();
                // 解决跨域 Canvas 污染问题
                image.setAttribute("crossOrigin", "anonymous");
                image.onload = function() {
                    let canvas = document.createElement("canvas");
                    canvas.width = image.width;
                    canvas.height = image.height;
                    let context = canvas.getContext("2d");
                    context.drawImage(image, 0, 0, image.width, image.height);
                    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                    let a = document.createElement("a"); // 生成一个a元素
                    let event = new MouseEvent("click"); // 创建一个单击事件
                    a.download = name || "photo"; // 设置图片名称
                    a.href = url; // 将生成的URL设置为a.href属性
                    a.dispatchEvent(event); // 触发a的单击事件
                };
                image.src = imgsrc;
            },
            onCancel() { // 撤销住院建议/健康指导
                let tips = '',
                    api = '';
                let params = {};
                /*  if (this.resourceType == 2) { // 撤回健康指导
                     tips = '是否要撤销健康指导？'
                     api = '';
                     params.id = this.id;
                 }  */
                if (this.resourceType == 1) {
                    tips = '是否要撤销住院建议？'
                    api = 'deleteInquiryLogHospitalization';
                    params.logId = this.id;
                }

                this.$confirm(tips, '撤销', {
                    customClass: 'x-confirm',
                    confirmButtonText: '确认',
                    cancelButtonText: '取消'
                }).then(confirmRes => {
                    this.$ajax[api](params).then(res => {
                        this.$util.message(res.msg, 'success')
                        this.onClose(true)
                    }).catch(err => {
                        this.$util.message(err.msg)
                    })
                })

            },
            onClose(flag) {
                this.cfg.visible = false;
                this.$emit('closed', flag);

                Object.assign(this.$data, this.$options.data.call(this));
            }
        }
    }
</script>

<style lang="scss" scoped>
    .print__cont {
        width: 100%;
        min-height: 700px;
    }

    .print__footer {
        text-align: center;
    }
</style>